
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>完整demo</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" charset="utf-8" src="js/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/ueditor.all.min.js"> </script>
	<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
	<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
	<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

	<style type="text/css">
		#btns>div{
			width:90%;
		}

		#edui1_iframeholder{
			height: 350px;
		}
		#nameInp{
			height: 55px;
			border: none;
			font-size: 36px;
			width: 1046px;
			margin-left: 20px;
		}
		form{
			background-color: #FFF;
		}

		#save{
			width: 80px;
			height: 36px;
			border: 1px solid #E2E2E2;
			border-radius: 8px;
			background-color: #fff;
			position: absolute;
			top: 9px;

		}
		#save:hover{
			border: 1px solid #959FB0;
		}
		#eTimages{
			position: absolute;
			margin-left: 100px;
			top: 16px;
		}
		#eTimages img{
			width: 22px;
			height: 22px;
			margin-right: 6px;

		}
		#edui1_iframeholder{
			height: 721px;
		}

		.labels {
			display: none;
		}

		.labelInput {
			border-radius: 5px;
			border: 1px solid #E0E1E5;
			height: 24px;
			padding-left: 5px;
			margin-top: 5px;
			margin-bottom: 0px;
		}

		.addLabel {
			border-radius: 5px;
			border: 1px solid #E0E1E5;
			height: 25px;
			padding-left: 5px;
			margin-bottom: 0px;
			margin-top: 7px;
		}
		.dell {
			display: none;
			width: 90px;
			padding: 5px;
			position: relative;
			left: 40px;
			border-radius: 5px;
			background-color: #2F4056;
			font-size: 8px;
		}
	</style>
</head>
<body>
<form>
	<div>
		<div id="eTop" style="height: 55px; position: relative;">
			<input id="nameInp"/>
			<input type="button" value="保存" id="save" />
			<span id="eTimages">
				 		<img src="img/tra1.png" style="width: 20px; height: 20px;" onMouseOver="this.src='img/tra2.png'" onMouseOut="this.src='img/tra1.png'"/>
				 		<img src="img/share3.png" onMouseOver="this.src='img/share4.png'" onMouseOut="this.src='img/share3.png'"/>
				 		<img src="img/rad1.png" style="width: 24px; height: 24px;" onMouseOver="this.src='img/rad2.png'" onMouseOut="this.src='img/rad1.png'"/>
				 		<img src="img/note1.png" style="margin-right: 10px; width: 21px; height: 21px;" onMouseOver="this.src='img/note2.png'" onMouseOut="this.src='img/note1.png'" id="clickLabel"/>
				 		<img src="img/more3.png"  style="margin-right: 10px;" onMouseOver="this.src='img/more4.png'" onMouseOut="this.src='img/more3.png'"/>
				 		<img src="img/more1.png" style="width: 18px; height: 18px;" onMouseOver="this.src='img/more2.png'" onMouseOut="this.src='img/more1.png'"/>
				 	</span>


		</div>

		<div class="labels">
			<img src="img/note2.png" width="20px" style="margin-left: 20px;" />
			<span id="eTop1"></span>
			<input class="addLabel" placeholder="输入后按回车键" />
			<div class="dell" style="color: white;">
				点击标签删除
			</div>
		</div>
		<script id="editor" type="text/plain" style="width:94.1%;height:100%;"></script>
		<input id="hvhh" hidden="hidden">
	</div>
	<!--<div id="btns">
        <div>
            <button onclick="getAllHtml()">获得整个html的内容</button>
            <button onclick="getContent()">获得内容</button>
            <button onclick="setContent()">写入内容</button>
            <button onclick="setContent(true)">追加内容</button>
            <button onclick="getContentTxt()">获得纯文本</button>
            <button onclick="getPlainTxt()">获得带格式的纯文本</button>
            <button onclick="hasContent()">判断是否有内容</button>
            <button onclick="setFocus()">使编辑器获得焦点</button>
            <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
            <button onmousedown="setblur(event)" >编辑器失去焦点</button>

        </div>
        <div>
            <button onclick="getText()">获得当前选中的文本</button>
            <button onclick="insertHtml()">插入给定的内容</button>
            <button id="enable" onclick="setEnabled()">可以编辑</button>
            <button onclick="setDisabled()">不可编辑</button>
            <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
            <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
            <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
        </div>

        <div>
            <button onclick="getLocalData()" >获取草稿箱内容</button>
            <button onclick="clearLocalData()" >清空草稿箱</button>
        </div>

    </div>-->
	<!--<div>
        &lt;!&ndash;<button onclick="createEditor()">
        创建编辑器</button>
        <button onclick="deleteEditor()">
        删除编辑器</button>&ndash;&gt;
    </div>-->

</form>


<script type="text/javascript">
	var ue = UE.getEditor('editor', {
		toolbars: [
			[
				'undo', //撤销
				'cleardoc',//重做
				'removeformat',//清除格式
				'formatmatch',//格式刷
				'paragraph', //段落格式
				'fontfamily', //字体
				'fontsize', //字号
				'bold', //加粗
				'italic',//斜体
				'underline', //下划线
				'strikethrough',//删除线
				'forecolor', //字体颜色
				'backcolor',//字体背景颜色
				'insertunorderedlist',//无序列表
				'insertorderedlist',//项目排序
				'blockquote',//引用
				'insertcode',//代码块
				'justifyleft', //居左对齐
				'justifyright', //居右对齐
				'justifycenter', //居中对
				'justifyjustify', //两端对齐
				'inserthtml',//插入html代码
				'justify',//对齐方式
				'indent',//缩进
				'inserttable', //插入表格
				'horizontal', //分隔线
				'link',//插入超链接
				'simpleupload', //单图上传
				'insertimage', //多图上传
				'attachment', //附件
				'emotion', //表情
				'inserttitle', //插入标题
				'selectall',//选中所有内容
				'music', //音乐
				'preview', //预览
				'insertvideo', //视频

				'fullscreen', //全屏
				'edittip ', //编辑提示
				'customstyle', //自定义标题
				'template', //模板
			]
		]
	});





	function isFocus(e){
		alert(UE.getEditor('editor').isFocus());
		UE.dom.domUtils.preventDefault(e)
	}
	function setblur(e){
		UE.getEditor('editor').blur();
		UE.dom.domUtils.preventDefault(e)
	}
	function insertHtml() {
		var value = prompt('插入html代码', '');
		UE.getEditor('editor').execCommand('insertHtml', value)
	}
	function createEditor() {
		enableBtn();
		UE.getEditor('editor');
	}
	function getAllHtml() {
		alert(UE.getEditor('editor').getAllHtml())
	}
	function getContent() {
		var arr = [];
		arr.push("使用editor.getContent()方法可以获得编辑器的内容");
		arr.push("内容为：");
		arr.push(UE.getEditor('editor').getContent());
		alert(arr.join("\n"));
	}
	function getPlainTxt() {
		var arr = [];
		arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
		arr.push("内容为：");
		arr.push(UE.getEditor('editor').getPlainTxt());
		alert(arr.join('\n'))
	}
	function setContent(isAppendTo) {
		var arr = [];
		arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
		UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
		alert(arr.join("\n"));
	}
	function setDisabled() {
		UE.getEditor('editor').setDisabled('fullscreen');
		disableBtn("enable");
	}

	function setEnabled() {
		UE.getEditor('editor').setEnabled();
		enableBtn();
	}

	function getText() {
		//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
		var range = UE.getEditor('editor').selection.getRange();
		range.select();
		var txt = UE.getEditor('editor').selection.getText();
		alert(txt)
	}

	function getContentTxt() {
		var arr = [];
		arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
		arr.push("编辑器的纯文本内容为：");
		arr.push(UE.getEditor('editor').getContentTxt());
		alert(arr.join("\n"));
	}
	function hasContent() {
		var arr = [];
		arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
		arr.push("判断结果为：");
		arr.push(UE.getEditor('editor').hasContents());
		alert(arr.join("\n"));
	}
	function setFocus() {
		UE.getEditor('editor').focus();
	}
	function deleteEditor() {
		disableBtn();
		UE.getEditor('editor').destroy();
	}
	function disableBtn(str) {
		var div = document.getElementById('btns');
		var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
		for (var i = 0, btn; btn = btns[i++];) {
			if (btn.id == str) {
				UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
			} else {
				btn.setAttribute("disabled", "true");
			}
		}
	}
	function enableBtn() {
		var div = document.getElementById('btns');
		var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
		for (var i = 0, btn; btn = btns[i++];) {
			UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
		}
	}

	function getLocalData () {
		alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
	}

	function clearLocalData () {
		UE.getEditor('editor').execCommand( "clearlocaldata" );
		alert("已清空草稿箱")
	}


	console.log(sessionStorage.getItem("nId"));

	$(function () {
		$.ajax({
			data:{
				id:sessionStorage.getItem("nId"),
				token:sessionStorage.getItem("accessToken"),
			},
			url:'http://338de254.cpolar.io/note-notes/notes/searchNote',
			success:function (d) {
				$('#nameInp').val(d.notesName);

				ue.ready(function () {

					$('#hvhh').val(d.content==null?"":d.content);
					ue.setContent($('#hvhh').val())

				})

			}
		})

	})




	layui.use(['element', 'layer'], function () {
		var element = layui.element;
		var $ = layui.$;
		var layer = layui.layer;
		var label = $("#label");

		$('#save').click(function () {
			$.ajax({
				data:{
					id:sessionStorage.getItem("nId"),
					content:ue.getContent(),
					notesName:$('#nameInp').val(),
					token:sessionStorage.getItem("accessToken"),
				},
				url:'http://338de254.cpolar.io/note-notes/notes/updateContent',
				success:function (d) {
					if (d.rs) {
						parent.layer.msg('添加成功', {icon: 1});
						window.location.reload();
					}

				}
			});
		})
		var noteName = sessionStorage.getItem('noteName');
		var labels = sessionStorage.getItem('labels');
		var c = JSON.parse(labels);
		var token=sessionStorage.getItem("accessToken");
		console.log("xuyuanxing"+token)

		$.each(c, function(index, obj) {
			console.log(obj.labelName)
			$("#eTop1").append("<input size='8' class='labelInput'  readonly='readonly' value='" + obj.labelName + "'/>")
		})
		$('.addLabel').keydown(function (event)  {
			if (event.keyCode  ==  13)  {
				console.log("asdssdadasdasd")
				var addLabelName = $(".addLabel").val();
				$.ajax({
					type: 'post',
					url: 'http://338de254.cpolar.io/note_label/label/addLabel2',
					data: {
						labelName: addLabelName,
						id: noteName,
						token:token
					},
					success: function(d) {
						if(d == 1) {
							console.log("false")
							$("#eTop1").append("<input class='labelInput' value='" + addLabelName + "'/>");
							//a添加成功后，
							parent.children('#labelList').reload();
						} else if(d == 2) {
							console.log("有这个标签，关系表也有")
						} else {
							console.log("有这个标签，但关系表没有")
						}
					},
				})
			}
		})

		$("#clickLabel").click(function() {
			console.log("点击标签");
			if($('.labels').is(':hidden')) { //如果当前隐藏
				$('.labels').show(); //那么就显示div
			} else { //否则
				$('.labels').hide(); //就隐藏div
			}
		});

		$(".labelInput").click(function(e) {
			var labelName = $(this).val();
			$.ajax({
				type: 'post',
				url: 'http://338de254.cpolar.io/note_label/label/delLabel2',
				data: {
					labelName: labelName,
					id : noteName,
					userId:token,
					token:token
				},
				success: function(d) {},
			})
			$(this).remove(".labelInput");
		});

		$(document).ready(function() {
			$(".labelInput").mouseover(function() {
				$(".dell").show("slow");
				$(".labelInput").mouseout(function() {
					$(".dell").hide("slow");
				});
			});
		})

	});

</script>
</body>
</html>